/* 全局重置，去除默认的边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 增加 box-sizing 以更好地处理元素尺寸 */
}

/* 清除列表的默认样式 */
ul, ol, li {
  list-style: none;
}

/* 链接的样式，包括各种状态下的文本装饰和颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 鼠标悬停在链接上的样式 */
a:hover {
  text-decoration: none;
  color: #333;
}

/* 当链接被点击时的样式 */
a:active {
  text-decoration: none;
  color: #333;
}

/* 当链接是目标元素时的样式 */
a:target {
  text-decoration: none;
  color: #333;
}


img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 确保图片按比例填充容器，避免拉伸 */
}

/* 容器的宽度和水平居中 */
.container {
  max-width: 1200px; /* 改为最大宽度，提高响应性 */
  margin: 0 auto;
}


.header {
  height: 60px;
  background-color: skyblue;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}


.header > p {
  position: absolute;
  font-size: 18px;
  right: 20px;
  font-weight: 500;
  display: none;
  line-height: 1.5; /* 增加行高，提高可读性 */
}


.header > p.active {
  display: block;
}


.header > p > button {
  cursor: pointer;
  padding: 3px 10px;
  border: none; /* 去除按钮边框 */
  border-radius: 3px; /* 为按钮添加圆角 */
  background-color: #fff; /* 为按钮添加背景色 */
  color: skyblue; /* 为按钮添加字体颜色 */
  transition: background-color 0.3s ease; /* 为按钮添加过渡效果 */
}


.header > p > button:hover {
  background-color: #ddd; /* 鼠标悬停时的按钮背景色 */
}


.header > p > a {
  color: red;
  text-decoration: underline; /* 为链接添加下划线 */
}


.footer {
  height: 300px;
  background-color: skyblue;
  display: flex;
  font-size: 100px;
  color: #fff;
  justify-content: center;
  align-items: center;
  line-height: 1.2; /* 增加行高，提高可读性 */
}